<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('首页')"/>
    <style type="text/css">

        /*.main-bg,body{*/
        /*    background-color: #001247;*/
        /*}*/
.container-div{
    padding: 12px;
}
.container-div .card{
    margin-bottom: 12px;
}
        .fixed-table-toolbar {
            display: none;
        }
        .content-tabs{
            display: none;
        }

    </style>
</head>
<body class="gray-bg main-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 col-md-9">
            <div class="d-flex btn-wrap">
                <div class="flex-item"><div class="btn btn-lg btn-success"><span>设备总数</span><text class="news-info fs-lg" th:text="${deviceTotal}"  ></text></div></div>
                <div class="flex-item"><div class="btn btn-lg btn-warning"><span>预警总数</span><text class="news-info fs-lg" th:text="${earlyWarnTotal}"  ></text></div></div>
                <div class="flex-item"><div class="btn btn-lg btn-danger"><span>告警总数</span><text class="news-info fs-lg" th:text="${alarmTotal}"  ></text></div></div>
                <div class="flex-item"><div class="btn btn-lg btn-secondary"><span>离线总数</span><text class="news-info fs-lg" th:text="${offlineTotal}"  ></text></div></div>
                <div class="flex-item"><div class="btn btn-lg btn-info"><span>待办工单总数</span><text class="news-info fs-lg" th:text="${waitWork}"  ></text></div></div>
            </div>
            <div class="row">
                <div class="card"></div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">设备种类分布</h5>
                        </div>
                        <div class="card-body">
                            <div class="echarts" id="echarts-sbzl-chart"></div>
                        </div>
                    </div>

                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">工单状态统计</h5>
                        </div>
                        <div class="card-body">
                            <div class="echarts" id="echarts-gdtj-chart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">设备状态趋势统计</h5>
                        </div>
                        <div class="card-body">
                            <div class="echarts" id="qst"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">预警列表</h5>
                        </div>
                        <div class="card-body">
                            <div class="waring-table">
<!--                                <div class="waring-table-tools">-->
<!--                                    <form id="formId">-->
<!--                                        <div class="select-list">-->
<!--                                            <ul>-->
<!--                                                <li>-->
<!--                                                    <label>设备类型：</label>-->
<!--                                                    <select name="deviceType"-->
<!--                                                            th:with="type=${@dict.getType('gy_device_type')}" required>-->
<!--                                                        <option value="">请选择</option>-->
<!--                                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"-->
<!--                                                                th:value="${dict.dictValue}"></option>-->
<!--                                                    </select>-->
<!--                                                </li>-->
<!--                                                <li>-->
<!--                                                    <label>所属学院：</label>-->
<!--                                                    <select name="locationId"-->
<!--                                                            th:with="type=${@dict.getType('gy_locations')}" required>-->
<!--                                                        <option value="">请选择</option>-->
<!--                                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"-->
<!--                                                                th:value="${dict.dictValue}"></option>-->
<!--                                                    </select>-->
<!--                                                </li>-->
<!--                                                <li>-->
<!--                                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i-->
<!--                                                            class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--                                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i-->
<!--                                                            class="fa fa-refresh"></i>&nbsp;重置</a>-->
<!--                                                </li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </form>-->
<!--                                </div>-->
                                <div class="col-sm-12 select-table table-striped">
                                    <div class="tabs-container">
                                        <ul class="nav nav-tabs">

                                            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true" onclick="goTab1()">
                                                告警提醒</a>
                                            </li>
                                            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false" onclick="goTab2()">预警提醒</a>
                                        </li>


                                        </ul>
                                        <div class="tab-content">
                                            <div id="tab-1" class="tab-pane active">
                                                <div class="panel-body">
                                                    <table id="bootstrap-table"></table>
                                                </div>
                                            </div>
                                            <div id="tab-2" class="tab-pane">
                                                <div class="panel-body">
                                                    <table id="bootstrap-table2"></table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-sm-12 col-md-3">
            <div class="row">
                <div class="col-md-12 col-sm-6">
                    <div class="card box-notic">
                        <div class="card-header">
                            <h5 class="card-title mb-0">通知公告</h5>
                        </div>
                        <div class="card-body">
                            <ol class="todo-content">
                                <li class="todo-content-block" th:each="l:${notices}">
                                    <a class="btn-check-a"  data-toggle="tooltip" data-placement="top" title="内容" th:onclick="toTab([[${l.noticeId}]])" data-refresh="false">
                                        <text class="news-info" th:text="${l.noticeTitle}"  ></text>
                                        <text class="news-time"     th:text="${#dates.format(l.createTime, 'yyyy-MM-dd')}"></text>
                                    </a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 col-sm-6">
                    <div class="card box-todo">
                        <div class="card-header">
                            <h5 class="card-title mb-0">工单提醒</h5>
                        </div>

                        <div class="card-body p-0" id="ibox-content" style="overflow: auto;height: calc(50vh - 68px);">
<div class="nodata-wrap" th:if="${#lists.isEmpty(msgList)}">
   <div class="nodata">
       <div class="nodata__icon"><i class="glyphicon glyphicon-inbox"></i></div>
       <div class="nodata__text">暂无数据</div>
   </div>
</div>
                            <div id="vertical-timeline" class="vertical-container dark-timeline" th:each="l:${msgList}">
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon navy-bg">
                                        <i class="fa fa-calendar"></i>
                                    </div>

                                    <div class="vertical-timeline-content">
                                        <h2 >您有新的工单提醒!  <small  class="ms-1" th:text="${#dates.format(l.sendTime, 'yyyy-MM-dd HH:mm:ss')}">2月3日</small></h2>
                                        <a href="#" th:text="${l.memo}" th:onclick="getWorkOrderDetail([[${l.workOrderId}]])"> </a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
           </div>
        </div>
    </div>

<!--    <div class="main-left-side"></div>-->
<!--    <div class="main-right-side"></div>-->
</div>

</body>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system";
    var deviceTypeDatas = [[${@dict.getType('gy_device_type')}]];
    var locaionsDatas = [[${@dict.getType('gy_locations')}]];
    var deviceStatus = [[${@dict.getType('gy_device_status')}]];


    function goTab2() {
        var options = {
            id: "bootstrap-table2",
            url: prefix + "/deviceEarlyWaningRecordlistLimt",   //审核通过
            striped: "true",
            modalName: "设备预警记录",
            pagination: false,
            columns: [{
                true: false
            },
                {
                    field: 'earlyWarnId',
                    title: '主键',
                    visible: false
                },
                {
                    field: 'locationId',
                    title: '所属学院',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(locaionsDatas, value);
                    }
                },
                {
                    field: 'gyDevice.deviceName',
                    title: '设备名称'
                },
                {
                    field: 'deviceType',
                    title: '设备类型',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(deviceTypeDatas, value);
                    }
                },
                {
                    field: 'deviceType',
                    title: '预警原因',
                    formatter: function (value, row, index) {
                        return '运行时间超过系统设置的阀值';
                    }
                },
                {
                    field: 'gyDevice.deviceStatus',
                    title: '设备状态',
                    formatter: function (value, row, index) {   //deviceStatus
                        return "预警";
                    }
                },
                {
                    field: 'createTime',
                    title: '报警时间'
                },
            ]

        };
        $.table.init(options);
    };

    $(function () {

        devicePieChart();    //设备分类统计
        devicStatusChart();  //设备状态统计

        workOrderPieChart();//工单状态在统计
        var options1= {
            url: prefix + "/deviceAlarmRecordlistLimit",
            modalName: "设备告警记录",
            pagination: false,
            columns: [
                {
                    field: 'alarmId',
                    title: '主键',
                    visible: false
                },
                {
                    field: 'locationId',
                    title: '所属学院',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(locaionsDatas, value);
                    }
                },
                {
                    field: 'gyDevice.deviceName',
                    title: '设备名称'
                },
                {
                    field: 'deviceType',
                    title: '设备类型',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(deviceTypeDatas, value);
                    }
                },
                {
                    field: 'gyDevice.deviceStatus',
                    title: '设备状态',
                    formatter: function (value, row, index) {   //deviceStatus
                        return "告警";
                    }
                },
                {
                    field: 'createTime',
                    title: '报警时间'
                },
                // {
                //     title: '操作',
                //     align: 'center',
                //     formatter: function (value, row, index) {
                //         var actions = [];
                //         //  actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.alarmId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                //         //  actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.alarmId + '\')"><i class="fa fa-remove"></i>删除</a>');
                //         return actions.join('');
                //     }
                // }


            ]
        }
        $.table.init(options1);



    });


    function goTab1() {
        $.table.refresh("bootstrap-table");
    }
    // window.onload = function () {
    //     goTab1();
    // }
    function devicStatusChart() {
        var statusArray = [[${statusArray}]];
        var typeArray = [[${typeArray}]];
        var jsonArray = [[${jsonArray}]];
        console.log(jsonArray)


        var shzlChart = echarts.init(document.getElementById("qst"));
        let xAxisData = [];
        let data1 = [];
        let data2 = [];
        let data3 = [];
        let data4 = [];
        let data5 = [];

        var emphasisStyle = {
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)'
            }
        };
        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data: statusArray,
                left: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 14
                }
            },
            // brush: {
            //     toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
            //     xAxisIndex: 0
            // },
            //#11ff00,#fff100,#ff0000
            "color": ['#1e91ff', '#975fe4', '#f2637b', '#fad337', "#4dcb73", "#13c2c2"],
            tooltip: {},
            xAxis: {
                data: typeArray,
                name: '',
                axisLine: {onZero: true},
                splitLine: {show: false},
                splitArea: {show: false},
                color: '#666',
                axisLabel: {
                    color: '#666',
                }
            },
            yAxis: {
                axisLabel: {
                    color: '#666',
                }
            },
            series: [[${jsonArray}]]
        };

        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }

    // 以新标签页打开待办事项的立即处理
    function toTab(noticeId) {
        window.open( prefix+ "/notice/detail?id=" + noticeId, '_blank')
    }


    function getWorkOrderDetail(id) {
        console.log(id)
        var btn = ['<i class="fa fa-close"></i> 关闭'];
        var options = {
            title: '详细信息',
            fix: false,
            url:  ctx + "gy"+ "/workOrder/detail?workId=" + id ,
            btn: btn,
            width: '1050',
            height: '500',
            callBack: closeModal2
        };
        $.modal.openOptions(options);
    }
    function closeModal2(index, layer) {
        $.modal.close(index);
    }
    function reset() {
        $.form.reset("dateForm");
    }


    function devicePieChart() {
        var shzlChart = echarts.init(document.getElementById("echarts-sbzl-chart"));
        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                color: '#4de6ff'
            },
            legend: {
                top: '5%',
                left: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 14
                }
            },
            "color": ['#1e91ff', '#975fe4', '#f2637b', '#fad337', "#4dcb73", "#13c2c2"],
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [[${list}]]
                }
            ]
        };
        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }


    //工单统计饼图
    function workOrderPieChart() {
        var shzlChart = echarts.init(document.getElementById("echarts-gdtj-chart"));
        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                color: '#4de6ff'
            },
            legend: {
                top: '5%',
                left: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 14
                }
            },
            "color": ['#1e91ff', '#975fe4', '#f2637b', '#fad337', "#4dcb73", "#13c2c2"],
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [[${workList}]]
                }
            ]
        };
        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }
</script>
</body>
</html>
